/*
 * @Description: 自定义设置
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-03-31 19:05:22
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-02 10:25:41
 */
import React, { useState, useEffect } from 'react';
import { Button, Checkbox, message } from 'antd';
import Pubsub from 'pubsub-js'
import {
    FormOutlined
} from '@ant-design/icons';
import ModifiName from './modifiName'


import './index.css'
import '../../button.css'
const SelfSeting = (props) => {
    // const p2 = props
    let allfalge=true
    const startArr = [
        { id: 0, name: '客服联系人', showName: '客服联系人', columnShow: true, require: false },
        { id: 1, name: '工单类型', showName: '工单类型', columnShow: true, require: false },
        { id: 2, name: '起始时间', showName: '起始时间', columnShow: true, require: false },
        { id: 3, name: '结束时间', showName: '结束时间', columnShow: true, require: false },
        { id: 4, name: '交通方式', showName: '交通方式', columnShow: true, require: false },
        { id: 5, name: '差旅联系人', showName: '差旅联系人', columnShow: true, require: false },
        { id: 6, name: '工作描述', showName: '工作描述', columnShow: true, require: false },
        { id: 7, name: '指派人员', showName: '指派人员', columnShow: true, require: false },
        { id: 8, name: '发起人', showName: '发起人', columnShow: true, require: false },
        { id: 9, name: '发起时间', showName: '发起时间', columnShow: true, require: false }
    ]
    const { changeSeting } = props
    const [tableData, setTabledata] = useState(startArr)
    const [changemodifi, setchangemodifi] = useState(false)//显示隐藏自定义设置变量
    const [modifiId, setModifiId] = useState({})
    //选择showName和require修改(修改处理函数)
    function onChangeHeadle(e, selectId, selectName, falge) {
        let arr = []
        const stateSelcet = falge !== 1 ? e.target.checked : ''
        for (let i = 0; i <= tableData.length - 1; i++) {
            if (tableData[i].id === selectId && selectName === 'columnShow') {//修改列表显示
                tableData[i].columnShow = stateSelcet
                arr.push(tableData[i])
            } else if (tableData[i].id === selectId && selectName === 'require') {//修改是否必填
                tableData[i].require = stateSelcet
                arr.push(tableData[i])
            } else if (tableData[i].id === selectId && falge === 1) { //修改自定义选择名称处理函数
                // console.log("@@@@@@@@@",selectId, selectName, falge);
                tableData[i].showName = selectName
                arr.push(tableData[i])
            } else {
                arr.push(tableData[i])
            }
        }
        console.log('自定义设置',arr);
        //调用修改table数据
        setTabledata(arr)
        // Pubsub.publish('tableTitle', tableData)
    }
    //关闭弹窗
    const coloseHeadle = (startArr) => {
        Pubsub.publish('tableTitle', startArr)
        // setTabledata(startArr)
        changeSeting()
        console.log("startArr", startArr);
    }
    //修改显示名称
    function modifiName(eid, ename) {
        // console.log(eid,ename);
        setModifiId({ eid, ename })
        // setchangemodifi('modifiName-contanier')
        setchangemodifi(true)
    }
    //关闭修改字段弹框
    function colseModifiName() {
        /*  changemodifi === 'modifiName-contanier' ? setchangemodifi('modifiName-contanier2') : setchangemodifi('modifiName-contanier') */
        setchangemodifi(false)
    }
    //修改自定义选择名称处理函数
    /*  function modifiHedle(id, value) {
         console.log("das", 'id:', id, 'value:', value, p2);
         let arr = []
         for (let i = 0; i <= tableData.length - 1; i++) {
             if (tableData[i].id === id) {
                 tableData[i].showName = value
                 arr.push(tableData[i])
             } else {
                 arr.push(tableData[i])
             }
             //调用修改table数据
             setTabledata(arr)
         }
     } */

    //保存关闭
    function hideSetingHeadle() {
        changeSeting()
        Pubsub.publish('tableTitle', tableData)
        // console.log(p.changeSeting);
    }
   /*  useEffect(() => {
        Pubsub.publish('tableTitle', tableData)
        return () => {

        }
    }, []) */
    //自定义字段设置
    let falge = true
    const fieldHeadle = () => {
        setTimeout(() => {
            falge = true
        }, 5000);
        if (falge) {
            falge = false
            message.error({ content: '此功能还未开放！' });
        }
    }

    //渲染
    function showHtml() {
        let arr =allfalge?tableData:[]
        return (
            arr.map(item => {
                return (
                    <tr key={item.id}>
                        <td style={{ fontWeight: '700' }} id={item.id}>{item.name}</td>
                        <td id={item.id}>{item.showName}<FormOutlined className='selfSeting-icon' onClick={(x, y) => modifiName(item.id, item.showName)} /></td>
                        <td id={item.id}><Checkbox checked={item.columnShow} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'columnShow')} /></td>
                        <td id={item.id}><Checkbox checked={item.require} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'require')} /></td>
                    </tr>
                )
            })
        )
    }
    return (
        <div className="selfSeting-contanier seting-them">
            <header className='seting-them' >
                <div className='seting-them seting-title'>自定义设置</div>
            </header>
            <section className='selfSeting-table-containter'>
                <table className='table-box'>
                    <thead>
                        <tr>
                            <th>字段名称</th>
                            <th>显示名称</th>
                            <th>列名显示</th>
                            <th>是否必填</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            /* tableData.map(item => {
                                return (
                                    <tr key={item.id}>
                                        <td style={{ fontWeight: '700' }} id={item.id}>{item.name}</td>
                                        <td id={item.id}>{item.showName}<FormOutlined className='selfSeting-icon' onClick={(x, y) => modifiName(item.id, item.showName)} /></td>
                                        <td id={item.id}><Checkbox checked={item.columnShow} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'columnShow')} /></td>
                                        <td id={item.id}><Checkbox checked={item.require} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'require')} /></td>
                                    </tr>
                                )
                            }) */
                            allfalge?showHtml():<h1>1111</h1>
                        }
                    </tbody>
                </table>
                <footer>
                    <div className='slefSeting-setinf' onClick={fieldHeadle}>自定义字段管理</div>
                    <Button type='primary' className='btn-bgc-13' onClick={hideSetingHeadle}>保存</Button>&nbsp;&nbsp;
                    <Button type='primary' className='btn-bgc-12' onClick={coloseHeadle}>关闭</Button>
                </footer>
                {/* 修改弹窗 */}
                <section>
                    <ModifiName setchangemodifi={changemodifi} colseModifiName={colseModifiName} tableData={{ tableData, modifiId, onChangeHeadle }} />
                </section>
            </section>
        </div>
    )
}
export default SelfSeting